<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.7, minimum-scale=0.2, maximum-scale=1.0, user-scalable=yes" />
    <title>球队管理</title>
    <script src="common.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h1 {
            margin-bottom: 20px;
            color: #007bff;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        td {
            white-space: pre-line; /* 允许内容换行 */
        }

        /* 按钮样式 */
        .my-button {
            margin-bottom: 20px;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .my-button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<h1>球队管理</h1>
<button id="add-row-btn" class="my-button">添加</button>
<table id="product-table">
    <thead>
    <tr>
        <th>队名</th>
        <th>LOGO</th>
        <th>排序</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <!-- 这里是动态生成的内容 -->
    </tbody>
</table>
<script>
    if (sessionStorage.getItem("username") === null || sessionStorage.getItem("username") ==="undefined") {
        window.location.href = '/bp/login.html'; // 替换为你想要跳转的页面的URL
    }
    // 构造请求体等代码...

    // 获取添加行按钮
    const addRowBtn = document.getElementById("add-row-btn");

    // 添加行按钮点击事件
    addRowBtn.addEventListener("click", function () {
        // 获取表格的 tbody 元素
        const tableBody = document.querySelector("#product-table tbody");

        // 创建新行元素
        const newRow = document.createElement("tr");
        newRow.contentEditable = true;
        // 创建新单元格元素并添加到新行中
        const cell1 = document.createElement("td");
        cell1.textContent = "新队名";
        newRow.appendChild(cell1);

        const cell2 = document.createElement("td");
        cell2.textContent = "新LOGO";
        newRow.appendChild(cell2);

        const cell3 = document.createElement("td");
        cell3.textContent = "100";
        newRow.appendChild(cell3);

        const cell4 = document.createElement("td");
        const confirmButton = document.createElement("button");
        confirmButton.textContent = "确定";
        confirmButton.className = "my-button";
        confirmButton.onclick = confirmUpdate; // 确定按钮点击事件处理函数
        cell4.appendChild(confirmButton);

        const cancelButton = document.createElement("button");
        cancelButton.textContent = "取消";
        cancelButton.className = "my-button";
        cancelButton.onclick = cancelUpdate; // 取消按钮点击事件处理函数
        cell4.appendChild(cancelButton);
        newRow.appendChild(cell3);
        newRow.appendChild(cell4);

        // 将新行添加到表格的 tbody 中
        // 将新行添加到表格的 tbody 中的第一行
        tableBody.insertBefore(newRow, tableBody.firstChild);
    });

    function confirmUpdate() {
        const newRow = this.parentNode.parentNode;
        const newName = newRow.children[0].textContent;
        const newImage = newRow.children[1].textContent;
        const orderNum = newRow.children[2].textContent;
        // 执行相应的操作，比如发送请求更新数据
        // 这里假设更新操作成功后，恢复原始状态并更新内容
        newRow.contentEditable = false;
        // 更新操作成功后，将表格行的内容恢复为不可编辑状态，并更新为修改后的内容
        update(null, newName, newImage, orderNum);
        location.reload();
    }

    // 取消按钮点击事件处理函数
    function cancelUpdate() {
        const newRow = this.parentNode.parentNode;
        newRow.remove(); // 移除新增的行
    }


    // 构造请求体
    let formData = new FormData();
    let list;
    // 获取表格元素
    const tableBody = document.querySelector("#product-table tbody");
    formData.append('username', sessionStorage.getItem("username"));
    // 发送POST请求
    fetch('http://' + ip + ':8080/team', {
        method: 'POST',
        body: formData
    })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data.result === "ok") {
                list = data.data;
// 动态生成表格内容
                list.forEach(user => {
                    const row = document.createElement("tr");
                    const username = document.createElement("td");
                    username.textContent = user.name;
                    const image = document.createElement("td");
                    image.textContent = user.image;
                    const orderNum = document.createElement("td");
                    orderNum.textContent = user.orderNum;
                    const operation = document.createElement("td");

                    var button = document.createElement("button");
                    button.textContent = "修改"
                    button.className = "my-button"
                    button.onclick = function () {
                        update1(row, button, operation, user)
                    };
                    operation.appendChild(button);

// 将按钮添加到 operation 元素中
                    row.appendChild(username);
                    row.appendChild(image);
                    row.appendChild(orderNum);
                    row.appendChild(operation);
                    tableBody.appendChild(row);
                })
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });

    function update1(row, button, operation, user) {
        row.contentEditable = true;
        // 将该行内容切换为可编辑状态
        button.textContent = "确认";
        var cancelButton = document.createElement("button");
        cancelButton.textContent = "取消";
        cancelButton.className = "my-button";
        cancelButton.onclick = function () {
            cancel(row, button, operation, cancelButton, user)
        };
        operation.appendChild(cancelButton);
        button.onclick = function () {
            confirm(row, button, operation, cancelButton, user)
        };
    }

    function cancel(row, button, operation, cancelButton, user) {
        row.contentEditable = false;
        button.textContent = "修改";
        operation.removeChild(cancelButton);
        button.onclick = function () {
            update1(row, button, operation, user)
        };
    }

    function confirm(row, button, operation, cancelButton, user) {
        const newName = row.children[0].textContent;
        const newImage = row.children[1].textContent;
        const newOrderNum = row.children[2].textContent;
// 执行相应的操作，比如发送请求更新数据
// 这里假设更新操作成功后，恢复原始状态并更新内容
// 更新操作成功后，将表格行的内容恢复为不可编辑状态，并更新为修改后的内容
        row.contentEditable = false;
        button.textContent = "修改";
        operation.removeChild(cancelButton);
// 更新表格行的内容为修改后的内容
        user.name = newName;
        user.image = newImage;
        user.orderNum = newOrderNum;
        update(user.id, newName, newImage, newOrderNum);
        button.onclick = function () {
            update1(row, button, operation, user)
        };
    }

    function update(id, name, image, orderNum) {
        var request = {
            id: id,
            name: name,
            image: image,
            orderNum: orderNum
        };
        var jsonString = JSON.stringify(request);
        fetch('http://' + ip + ':8080/update/team', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: jsonString
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                if (data.result === "ok") {

                }
            })
    }
</script>
</body>
</html>
